<template>
    <div class="float-btn" :style="customStyle" @click="onClick">
        <el-row justify="center" align="middle" style="height: 100%">
            <slot></slot>
        </el-row>
    </div>
</template>

<script>
    import { defineComponent } from 'vue'

    export default defineComponent({
        name: 'FloatBtn',
        props: {
            customStyle: {
                type: String,
                default: '',
            },
            onClick: {
                type: Function,
                default: () => {},
            },
        },
        setup() {
            return {}
        },
    })
</script>

<style lang="less" scoped>
    @import url('@/common.less');
    .float-btn {
        background: white;
        border-radius: 50%;
        width: 55px;
        height: 55px;
        position: fixed;
        bottom: 30px;
        right: 30px;
        box-shadow: @box-shadow;
        border: 1px solid @border-color;
    }
</style>
